<template>
  <div class="app-menu">
    <app-menu-item v-for="(item, index) in menus" :key="item.value" :menu="item"
      :active="route.path == '/' + item.value" @click="selectMenu(item, index)" />
  </div>
</template>

<script setup>
import config from '@/config'

import kandan from '@/assets/menu/kandan.png'
import shuju from '@/assets/menu/shuju.png'
import jiqiren from '@/assets/menu/jiqiren.png'
import kandanActive from '@/assets/menu/kandan-active.png'
import shujuActive from '@/assets/menu/shuju-active.png'
import jiqirenActive from '@/assets/menu/jiqiren-active.png'

const route = useRoute()
const router = useRouter()
const sotre = useAppStore()
const { menuIndex, selectMenu } = toRefs(sotre)
const menus = [
  { label: '看单', value: 'home', icon: kandan, activeIcon: kandanActive },
  { label: '筛选器', value: 'filter', icon: jiqiren, activeIcon: jiqirenActive },
  {
    label: 'IP池',
    value: 'ips',
    icon: shuju,
    activeIcon: shujuActive,
  },
]
</script>

<style lang="scss" scoped></style>